<template>
  <div class="chart-card" :style="{ gridArea }">
    <div class="chart-card-header">
      <div class="card-title">{{ title }}</div>
      <div class="card-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-dot"></div>
      </div>
    </div>
    <div class="chart-card-content">
      <slot />
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  gridArea: {
    type: String,
    default: ''
  }
})
</script>

<style scoped>
@import './ChartCard.css';
</style>
